<template>
  <div>
    <div id="box">
        <div id="logo">

        </div>
        <van-search
        v-model="value"
        shape="round"
        background="red"
        placeholder="请输入搜索关键词"
        />
        <div class="banner">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="banner in banners" :key="banner.id">
                        <img :src="banner.image" alt="">
                    </div>
                </div>
            <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="types">
            <div @click="totype(type.name)" class="type" v-for="type in types" :key="type.id">
                <img :src="type.icon" alt="">
                <p>{{type.name}}</p>
            </div>
        </div>
        <div class="typePro" v-for="typePro in tp" :key="typePro.id">
            <h3><img src="../../assets/l-icon.png" alt="">{{typePro.name}}<img src="../../assets/r-icon.png" alt=""></h3>
            <div class="product" v-for="product in typePro.products" 
            :key="product.id">
                <p>本商品来自{{product.supplier}}</p>
                <img :src="product.banner" alt="">
                <p>{{product.name}}</p>
                <p>商品规格：{{product.specs}}</p>
                <P>价格：￥{{product.price}}元</P>
                <van-button type="warning">加入购物车</van-button>
            </div>

        </div>
        <myfooter/>
    </div>
    
    
  </div>
</template>
<script>
import Vue from 'vue';
import { Search } from 'vant';
import Swiper from 'swiper';
import 'swiper/swiper-bundle.min.css'
import axios from 'axios'
//'../../../node_modules/swiper/sw'
import { Button } from 'vant';
import myfooter from '@/components/myfooter'
import {getbanner, getTypes,getTP} from '@/request'

Vue.use(Search);
Vue.use(Button);
export default {
    components:{
        myfooter:myfooter
    },
    data(){
        return{
            value:'',
            banners:[],
            types:[],
            tp:[],
    }
  },
  created(){
    this.qingqiu()
  },
  updated(){
    var swiper = new Swiper(".mySwiper", {
        loop:true,
        autoplay:true,
        pagination: {
          el: ".swiper-pagination",
        },
      });
  },
  mounted(){
    
  },
  methods:{
    async qingqiu(){
        var banners = await getbanner()
        var types = await  getTypes()
        var tp = await getTP()
        this.banners=banners
        // console.log('banners',this.banners)
        this.types=types
        this.tp=tp
    },
    totype(typename){
        this.$router.push({
            path:'/types',
            query:{
                typename:typename
            }
        })
    }
  },
  
}
</script>
<style scoped>
#box{
    background:#ccc;
}
#logo{
  background: url("../../assets/logo.png") red;
  background-size: 100% 100%;
  height: 50px;
}
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner{
    position: relative;
    height: 200px;
    margin: 0 10px;
}
.types{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background-color: #fff;
    margin: 10px 10px 0;
}
.type img{
    width: 50px;
}
.type{
    margin: 10px 10px;
} 

.typePro>h3{
    text-align: center;
}
.typePro>h3 img{
vertical-align: middle;
margin: 0 20px;
}
.product{
background-color: #fff;
padding: 10px;
margin: 5px 10px;
border-radius: 20px;
}
.product .supplier{
font-size: 18px;
text-align: center;
}
.product img{
width: 100%;
border-radius: 20px;
}
.product .proname, .product .specs{
font-size: 18px;
padding: 0 10px;
}
.product .price{
font-size: 20px;
font-weight: bold;
color: #f00;
padding-left: 10px;
}
.van-button{
display: block;
width: 80%;
font-size: 20px;
margin: 0 auto;
border-radius: 20px;
}
</style>